<template>
    <div class="box2">
        <!-- 导航栏 -->
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <!-- 搜索框 -->
        <van-search @keydown="search" v-model="sou.searchValue" placeholder="请输入搜索关键词" />
        <!-- 历史搜索 -->
        <div class="box3">
            <h2>历史搜索</h2>
            <van-icon name="delete-o" style="font-size: 16px; margin: 0px 10px;" @click="del1" />
        </div>

        <div v-for="(v, i) in historylist" :key="i" class="his">
            <span class="span1">{{ v }}</span> <span class="span2"
                style="font-size: 16px; text-align: center; align-items: center;display: inline-block;"
                @click="del(i)">X</span>
        </div>
        <!-- 名牌医生 -->
        <h2>名牌医生</h2>
        <div class="box" v-for="(item, index) in listdata" :key="index">
            <img :src="item.image" alt="">
            <div class="box1">
                <p>标题:{{ item.title }}</p>
                <p>姓名:{{ item.name }}</p>
                <p>科室:{{ item.department }} {{ item.doctor }}</p>
                <p>三甲:{{ item.wound }}</p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import axios from '../../utils/request'
import { onMounted, ref } from 'vue'
import debounce from '../../components/fangdou/index'
// 定义搜索框的值
const sou = ref({
    searchValue: ''
})
// 定义名牌医生的数据
const listdata = ref<any>([])
// 从本地存储中获取历史搜索数据
const historylist = ref<any>([])
const getHistory = () => {
    localStorage.setItem('historyList', JSON.stringify(historylist.value))
}
//关键字搜索
const search = debounce(async (e: any) => {
    const res = await axios.get('/api/v1/search', {
        params: {
            name: sou.value.searchValue,
            title: sou.value.searchValue,
            department: sou.value.searchValue,
            doctor: sou.value.searchValue,
            wound: sou.value.searchValue,
        }

    })
    listdata.value = res.data.data
    // 添加到历史记录中
    if (e?.keyCode===13) {
        historylist.value.push(sou.value.searchValue)
        getHistory();
    }

})
search()
onMounted(() => {
    historylist.value = JSON.parse(localStorage.getItem('historyList') || '[]')
})
// 删除历史记录
const del = (index: number) => {
    historylist.value.splice(index, 1)
    getHistory()
}
// 清空历史记录
const del1 = () => {
    if (confirm('确定清空历史记录吗?')) {
        historylist.value = []
        getHistory()
    }
}
</script>
<style lang="scss" scoped>
.box2 {
    width: 100%;
    height: 100%;
    margin: 5px;

    .box {
        width: 100%;
        height: 100%;
        // background: #ccc;
        display: flex;

        img {
            width: 150px;
            height: 150px;
            padding: 10px;
        }

        .box1 {


            p {
                font-size: 16px;
                margin-top: 15px;
            }
        }
    }

    .his {
        width: 100%;
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        padding: 0px 10px;

        .span1 {
            display: inline-block;
            width: 100px;
            height: 30px;
            border-radius: 2px solid #ccc;
            display: flex;
            margin: 5px;
            font-size: 16px;
        }

    }

    .box3 {
        display: flex;
        justify-content: space-between;
       
    }
}
</style>
